// Token统计管理样式
.token-stats-management {
  .overview-cards {
    .overview-card {
      transition: all 0.3s ease;
      cursor: pointer;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
      
      .card-content {
        .card-icon {
          transition: all 0.3s ease;
          
          &:hover {
            transform: scale(1.1);
          }
        }
      }
    }
  }
  
  .filter-card {
    .filter-content {
      .el-date-editor {
        width: 240px;
      }
      
      .el-button {
        border-radius: 4px;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-1px);
        }
      }
    }
  }
  
  .table-card, .model-stats-card {
    .card-header {
      font-weight: 600;
      color: #303133;
      
      .el-button--text {
        color: #409EFF;
        font-weight: 500;
        
        &:hover {
          color: #66b1ff;
        }
      }
    }
    
    .el-table {
      .el-table__header {
        th {
          background-color: #fafafa;
          color: #606266;
          font-weight: 600;
        }
      }
      
      .el-table__body {
        tr {
          transition: background-color 0.3s ease;
          
          &:hover {
            background-color: #f5f7fa;
          }
        }
      }
      
      // 修复表格滚动条闪动问题
      .el-table__body-wrapper {
        &::-webkit-scrollbar {
          width: 8px;
          height: 8px;
        }
        
        &::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 4px;
        }
        
        &::-webkit-scrollbar-thumb {
          background: #c1c1c1;
          border-radius: 4px;
          transition: background-color 0.2s ease;
          
          &:hover {
            background: #a8a8a8;
          }
        }
        
        &::-webkit-scrollbar-corner {
          background: #f1f1f1;
        }
      }
    }
  }
  
  .pagination-container {
    .el-pagination {
      .el-pagination__total {
        color: #606266;
        font-weight: 500;
      }
      
      .el-pager li {
        transition: all 0.3s ease;
        
        &:hover {
          color: #409EFF;
        }
        
        &.active {
          background-color: #409EFF;
          color: white;
        }
      }
    }
  }
  
  // 响应式设计
  @media (max-width: 768px) {
    padding: 10px;
    
    .overview-cards {
      .el-col {
        margin-bottom: 10px;
      }
    }
    
    .filter-content {
      flex-direction: column;
      align-items: stretch !important;
      
      .el-date-editor {
        width: 100% !important;
        margin-bottom: 10px;
      }
      
      .el-button {
        margin-bottom: 5px;
      }
    }
  }
  
  // 加载状态样式
  .el-loading-mask {
    background-color: rgba(255, 255, 255, 0.8);
  }
  
  // 表格空状态
  .el-table__empty-block {
    .el-table__empty-text {
      color: #909399;
      font-size: 14px;
    }
  }
  
  // 标签样式
  .el-tag {
    border-radius: 12px;
    font-weight: 500;
    
    &.el-tag--danger {
      background-color: #fef0f0;
      border-color: #fbc4c4;
      color: #f56c6c;
    }
    
    &.el-tag--warning {
      background-color: #fdf6ec;
      border-color: #f5dab1;
      color: #e6a23c;
    }
    
    &.el-tag--success {
      background-color: #f0f9ff;
      border-color: #b3e19d;
      color: #67c23a;
    }
  }
  
  // 数字格式化样式
  .card-value {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    letter-spacing: 0.5px;
  }
  
  // 图标动画
  .el-icon-refresh {
    transition: transform 0.3s ease;
    
    &:hover {
      transform: rotate(180deg);
    }
  }
  
  .el-icon-download {
    transition: transform 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
    }
  }
}
